<template>
	<view class="nav">
		<scroll-view scroll-x="true" @scroll="scrollOne">
			<view class="nav_box">
				<view class="nav_content" :style="{'width':isRoll}"  :class="{'opacity':v.opacity}" v-for="v in nav" :key="v.name" @click="goContents(v.url)">
					<view class="img">
						<u-image :src="v.src" width="80rpx" height="80rpx"></u-image>
					</view>
					<view class="txt">
						{{v.name}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 下方小滚动条 -->
		<view class="step_long" v-if="this.nav.length > 4">
			<view class="setp_box" :style="{justifyContent: myPosition}">
				<view class="cur_location"></view>
			</view>
		</view>
	</view>
</template>

<script>
	//:nav Array 列表数组
	//@goContents  点击nav图标，具体的业务
	export default {
		props: ['nav'],
		name: "roll-nav",
		data() {
			return {
				myPosition: 'flex-start',
				isRoll:this.nav.length > 4 ? '22.5%' : '25%'
			};
		},
		methods: {
			scrollOne(e) {
				if (e.detail.deltaX < 0 || e.detail.scrollLeft > 50) { //小于零相当于向右侧滑动了
					this.myPosition = 'flex-end'
				} else {
					this.myPosition = 'flex-start'
				}
				//console.log(e.detail.deltaX,e.detail.scrollLeft)
			},
			async goContents(urlString) {
				this.$emit('goContents', urlString)
			},
		}
	}
</script>

<style lang="scss">
	.nav {
		background-color: white;
		margin: 20rpx 24rpx 0 24rpx;
		border-radius: 20rpx;

		.nav_box {
			display: flex;
			width: 100%;
			flex-wrap: nowrap;
			.opacity{
				opacity: .5;
			}
			//flex-direction: column;
			.nav_content {
				display: flex;
				flex-direction: column;
				align-items: center;
				//width: 22.5%;
				//width: 25%;
				flex-shrink: 0;
				
				.img {
					
					margin-top: 30rpx;
				}

				.txt {
					margin-top: 16rpx;
					font-size: 32rpx;
					margin-bottom: 20rpx;
					padding: 0 6rpx;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
					//width: 99%;
				}
			}

		}

		.step_long {
			padding-bottom: 20rpx;
			background-color: white;

			.setp_box {
				margin: 0 auto;
				background-color: #DAFFEE;
				width: 48rpx;
				height: 8rpx;
				border-radius: 200rpx;
				display: flex;

				//justify-content: flex-end;
				.cur_location {
					border-radius: 200rpx;
					width: 28rpx;
					height: 8rpx;
					background-color: #4DC0D9;
				}
			}

		}
	}
</style>